import gsap from "gsap";

export default abstract class DrawsAbstract {
    ctx: CanvasRenderingContext2D
    drawCheck: boolean = false
    baseDuration = .5
    size = {
        width: 50,
        height: 50
    }
    position = {
        x: 0,
        y: 0
    }
    abstract drawStyle: {
        size: {
            width: number,
            height: number
        },
        position: {
            x: number,
            y: number
        },
        [key: string]: any
    }

    protected constructor(ctx: CanvasRenderingContext2D, size?: {width: number, height: number}, position?: {x: number, y: number}) {
        this.ctx = ctx;
        size && (this.size = size)
        position && (this.position = position)
    }

    draw() {
        this.drawCheck && this.realDraw();
    }

    protected abstract realDraw(): void
    protected abstract in(): void
    protected abstract out(): void

    setSize(size: {width: number, height: number}) {
        this.size = size;
        gsap.to(this.drawStyle.size, {
            duration: this.baseDuration,
            width: size.width,
            height: size.height,
            ease: 'back.inOut(2)'
        })
    }

    setPosition(position: {x: number, y: number}) {
        this.position = position
        gsap.to(this.drawStyle.position, {
            duration: this.baseDuration,
            x: position.x,
            y: position.y,
            ease: 'back.inOut(2)'
        })
    }

    show() {
        this.drawCheck = true;
        this.in()
    }
    hide() {
        setTimeout(() => {
            this.drawCheck = false;
        }, this.baseDuration * 1000)
        this.out()
    }
}
